<script setup lang="ts">
import { ref } from 'vue';
import { SinalService } from "@/server/SinalService";
import TheWelcome from '../components/TheWelcome.vue';

let msg = ref("");
let room = ref("");
let sinalService: SinalService;

let sendBtn = ref(false)


function leaveRoom() {
  if (sinalService) {
    sinalService.leave();
    sendBtn.value = false;
  }
}
function joinRoom() {
  if (room) {
    sinalService = SinalService.joinRoom("ws://localhost:8080/web", room.value);
    sendBtn.value = true;
  }
}
function sendMessage(){
  if(sinalService&&msg){
    console.log("发送消息",msg.value);
    // sinalService.sendTo("all",msg.value);
  }
}


</script>

<template>
  <main>

    {{ room }}
    <button :disabled='sendBtn' @click=joinRoom>创建房间</button>
    <input v-model="room"/>
    <button :disabled='room == null' @click=joinRoom>加入房间</button>
    <button @click=leaveRoom>退出房间</button>
    <br />
    <p>msg:{{ msg }}</p>
    <input v-model="msg">
    <button :disabled=!sendBtn @click="sendMessage">发送消息</button>
    <TheWelcome />
  </main>
</template>
